<template>
	<view class="container">
		<text v-if="attachList.length==0" style="margin:20px;">暂无附件</text>
		<uni-card v-for="(item,index) in attachList" :key="index">
			<template v-slot:title >
				<view class="att-card-title">
					<text>{{item.linkName}}</text>
				</view>
			</template>
			<view style="display: flex;flex-wrap: wrap;">
				<view v-for="file in item.files" :key="file.attPath" style="width: 25%;padding: 0 5px;">
					<image v-if="file.attType == 'I'" :src="file.attPath" style="width: 100%;height: 64px;" @click="imgPreview(file)"/>
					<image v-if="file.attType == 'V'" src="@/static/images/dums/img_video.png" style="width: 100%;height: 64px;" @click="imgPreview(file)"/>
					<image v-if="file.attType == 'W'" src="@/static/images/dums/img_word.png" style="width: 100%;height: 64px;" @click="imgPreview(file)"/>
					<image v-if="file.attType == 'O'" src="@/static/images/dums/img_other.png" style="width: 100%;height: 64px;" @click="imgPreview(file)"/>
				</view>
			</view>
		</uni-card>
		<uni-popup ref="popup" type="center" background-color="#fff" width="350px">
			<video :src="videoUrl" autoplay="true"></video>
		</uni-popup>
	</view>
</template>

<script>
	import { getCaseAttachList } from "@/api/dums/caw/cawAttach";
	import { fileServerUrl } from "@/config.js";
	export default {
		data() {
			return {
				caseId:"",
				attachList:[],
				imgList:[],
				videoUrl:""
			}
		},
		onLoad(options) {
			this.caseId = options.caseId;
			this.getAttachList();
		},
		methods: {
			getAttachList(){
				getCaseAttachList({caseId:this.caseId}).then(res => {
					console.log(JSON.stringify(res));
					if(res.code == 200){
						let steps = res.rows.map((item,index) => {
							item.attPath = fileServerUrl+item.fileUrl;
							item.index = index;
							return item.linkName;
						})
						//获取存有附件的步骤，去重
						let allStep = [...new Set(steps)];
						allStep.forEach(step => {
							let temp = {
								linkName:step
							}
							temp.files = res.rows.filter(item => {
								return item.linkName == step;
							})
							this.attachList.push(temp);
						})
						console.log(JSON.stringify(this.attachList));
					}
				})
			},
			imgPreview(file){
				console.log(file.attPath);
				if(file.attType == "I"){
					uni.previewImage({
						urls:[file.attPath],
						current:0
					})
				}else if(file.attType == "W"){
					uni.openDocument({
						filePath: file.attPath,
						showMenu: true,
						success: function (res) {
							console.log('打开文档成功');
						}
					});
				}else if(file.attType == "V"){
					this.videoUrl = file.attPath;
					this.$refs.popup.open();
				}
				
			}
		}
	}
</script>

<style>
.att-card-title{
	padding: 10px 0;
	border-bottom: 1px solid #F1F1F1;
	margin-bottom: 10px;
	font-size: 16px;
	font-weight: bold;
}
.att-card-title::before{
	content: "";
	display: inline-block;
	width: 5px;
	height: 12px;
	background-color: #255CC3;
	border-radius: 3px;
	margin-right: 5px;
}
</style>
